<template>
  <main class="window">
        <header>
          <h1>Foxmail</h1>
          <div class="btns"></div>
        </header>
        <div class="content-wrap">
            <nav>
                <div class="actions">
                  <router-view name="menu"></router-view>
                </div>
                <div class="right">
                  2
                </div>
            </nav>
            <div class="content">
              <aside>
                <section></section>
                <footer>
                  <ul>
                    <router-link to="/page1" tag="li" active-class="active">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinbi"></use>
                      </svg>
                    </router-link>
                    <router-link to="/page2" tag="li" active-class="active">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanyi"></use>
                      </svg>
                    </router-link>
                    <router-link to="/page3" tag="li" active-class="active">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shubiao"></use>
                      </svg>
                    </router-link>
                    <router-link to="/page4" tag="li" active-class="active">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jisuanqi"></use>
                      </svg>
                    </router-link>
                    <router-link to="/page5" tag="li" active-class="active">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili"></use>
                      </svg>
                    </router-link>
                  </ul>
                </footer>
              </aside>
              <div class="list"></div>
              <div class="main">
                <router-view></router-view>
              </div>
            </div>
        </div>
    </main>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
@import url('//at.alicdn.com/t/font_2442757_nozuinujps8.css');

.icon {
  width: 1.5em; 
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
